<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>实况图片预览</title>
	<script src="https://cdn.apple-livephotoskit.com/lpk/1/livephotoskit.js"></script>
</head>

<body>
	<div data-live-photo data-photo-src="./img/IMG_6710.JPG"
		data-video-src="./img/IMG_6710.MOV" style="width: 320px; height: 320px"></div>
	<!-- data-photo-src 为常规图片地址 -->
	<!-- data-video-src 为音频地址 -->
	<script>
		// 等在dom加载完毕
		document.addEventListener("DOMContentLoaded", function () {
			console.log(`output->LivePhotosKit`,LivePhotosKit)
			const player = LivePhotosKit.augmentElementAsPlayer(
				document.querySelector("[data-live-photo]")
			);
			player.addEventListener('canplay', evt => console.log('player ready', evt));
			player.addEventListener('error', evt => console.log('player load error', evt));
			player.addEventListener('ended', evt => console.log('player finished playing through', evt));
			player.play();
		});
	</script>
</body>

</html>